<ion-grid class="ios-background">
    <ion-row no-padding>
        <ion-col width-10>
            <button (click)="presentEmojiPopover($event)" class="emoji-btn" small ion-button clear icon-left>
                <ion-icon color="middle-dark" name="ios-happy-outline"></ion-icon>
            </button>
            
        </ion-col>
        <ion-col>
            <ion-row class="fake-text-input">
                <ion-col width-90>
                    <button [style.display]="recordState != 'after_record' ? 'none': 'flex'" (click)="cancelRecord($event)" class="stop-input" (press)="record($event)" small ion-button clear color="light" icon-left>
                        <ion-icon name='md-close'></ion-icon>
                    </button>
                    <ion-input [style.display]="recordState != 'non_recording' ? 'none': 'flex'" class="ios-input" placeholder="Input Reply" type="text" [(ngModel)]="currentReplyContent" (keyup.enter)="doReply()"></ion-input>
                </ion-col>
                <ion-col width-10>
                    <button (touchend)="prepareSend($event)" (touchstart)="sendRecord($event)" (press)="record($event)" class="input-btn" small ion-button clear color="light" icon-left>
                        <ion-icon [name]='recordIcon'></ion-icon>
                    </button>
                </ion-col>
            </ion-row>
        </ion-col>
    </ion-row>
</ion-grid>
<reply-list [replies]="replies"></reply-list>